<template>
    <div class="search-box">
      <input type="text" v-model="query" @input="searchIfEnter" placeholder="请输入搜索关键词">
      <button @click="search">搜索</button>
      <button @click="$emit('clearHistory')">清除历史</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        query: '',
      };
    },
    methods: {
      searchIfEnter(event) {
        if (event.keyCode === 13) { // 13 是回车键的 keyCode
          this.$emit('search', this.query);
        }
      },
      search() {
        this.$emit('search', this.query);
      },
    },
  };
  </script>
  
  <style scoped>
  .search-box {
    display: flex;
    align-items: center;
  }
  input {
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  button {
    padding: 5px 10px;
    margin-left: 5px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
  }
  </style>
  